<template>
	<view class="container">
		<!-- left左侧列表 -->
		<view class="left">
			<!-- 循环遍历的 -->
			<!--  activeList-->
			<view 
			class="left_list " 
			v-for="(item,index) of allCates" 
			:class="cateIndex == index ? 'activeList': ''"
			@click="_switchCates(index)"
			:key="item.id">
				<label for="">{{item.catename}}</label>
			</view>
		</view>
		<!-- right右侧详细分类商品 -->
		<view class="right">
			<!-- 每一个小类 -->
			<view class="right_list">
				<!-- 商品 -->
				<view class="bottom">
					
					<block v-if="allCates.length > 0">
						<view
						class="bottom_list" 
						v-for="(item,index) of allCates[cateIndex].children"
						:key="item.id"
						>
							<view>
								<image :src="item.img" alt="">
								<span>{{item.catename}}</span>
							</view>
						</view>
					</block>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	
	import Http from '@/utils/http.js'
	
	import { apiurl } from '@/utils/config.js'
	
	export default {
		data() {
			return {
				allCates:[],//所有商品分类
				cateIndex:0,//当前显示的分类
			}
		},
		mounted(){
			
			this._getAllCates()
		},
		methods: {
			
			//切换类别
			_switchCates(index){
				this.cateIndex = index
			},
			
			//获取所有类别
			async _getAllCates(){
				let result = await Http({
					url:'/api/getcates'
				})
				//console.log( result,'000' )
				result.data.list.forEach(item1=>{
					
					//如果children有值则返回，没有数据则返回一个空数组
					item1.children = item1.children ? item1.children : []
					item1.children.forEach(item2=>{
						//console.log( item2 )
						item2.img = apiurl + item2.img
					})
				})
				this.allCates = result.data.list
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	@import url("../../common/css/classify.css");

	/* 点击左侧导航，显示动态样式 */
	.activeList {
		border-left: 6rpx solid #f26b11;
		color: #f26b11;
	}

	.bottom {
		text-align: center;
		display: flex;
		flex-direction: row;
	}
</style>
